<template>
    <div class="strategybooking-add" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title"> 添加预定</span>
            </div>
            <div class="form-database-form">
                <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
                    <el-form-item v-if="isRead" label="线路编号" prop="number">
                        {{ form.number }} </el-form-item>

                    <el-form-item v-if="isRead" label="线路名称" prop="strategyName">
                        {{ form.strategyName }} </el-form-item>

                    <el-form-item v-if="isRead" label="城市" prop="city">
                        {{ form.city }} </el-form-item>

                    <el-form-item v-if="isRead" label="时间" prop="month">
                        {{ form.month }} </el-form-item>

                    <el-form-item v-if="isRead" label="天数" prop="days">
                        {{ form.days }} </el-form-item>

                    <el-form-item v-if="isRead" label="价格" prop="price"
                        :rules="[{ validator: rule.checkNumber, message: '输入一个有效数字' }]">
                        {{ form.price }} </el-form-item>

                    <el-form-item label="订单号" prop="orderId" :rules="[{ message: '请填写订单号' }]">
                        <el-input placeholder="输入订单号" style="width:250px;" v-model="form.orderId" readonly />
                    </el-form-item>

                    <el-form-item label="预订人" prop="username">
                        <el-input v-model="form.username" readonly style="width: 250px;"></el-input> </el-form-item>

                    <el-form-item label="预订时间" prop="time" required :rules="[{ required: true, message: '请填写预订时间' }]">
                        <el-date-picker
                            v-model="form.time"
                            type="datetime"
                            :editable="false"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期"
                            :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="预订人姓名" prop="name">
                        <el-input placeholder="输入预订人姓名" style="width:250px;" v-model="form.name" />
                    </el-form-item>

                    <el-form-item label="联系方式" prop="telephone">
                        <el-input placeholder="输**系方式" style="width:250px;" v-model="form.telephone" />
                    </el-form-item>

                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="form.remark"></el-input> </el-form-item>

                    <el-form-item v-if="btnText">
                        <el-button type="primary" @click="submit">{{ btnText }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
.strategybooking-add {}
::v-deep .el-button--primary {
    color: #FFFFFF;
    background-color: #7fabbe;
    border-color: #7fabbe;
}
</style>
<script>
import api from '@/api'
import rule from '@/utils/rule'
import { extend } from '@/utils/extend'

export default {
    name: 'strategybooking-add',
    data() {
        return {
            readMap: {},
            rule,
            loading: false,
            form: {
                number: '',
                strategyName: '',
                city: '',
                month: '',
                days: '',
                price: '',
                orderId: rule.getID(),
                time: '',
                name: '',
                telephone: '',
                status: '未支付',
                remark: '',
                username: this.$store.state.user.session.username,
                strategyId: 0,
                payment: "否"
            },
            pickerOptions: {
                disabledDate(time) {
                    const now = new Date();
                    // 如果需要允许选择当天的时间，则注释掉下面这行
                    // now.setHours(0, 0, 0, 0); 
                    return time.getTime() < now.getTime();
                }
            }
        }
    },
    watch: {
    },
    props: {
        isRead: {
            type: Boolean,
            default: true
        },
        btnText: {
            type: String,
            default: '提交'
        },
    },

    computed: {},
    methods: {
        submit() {
            this.$refs.formModel.validate().then(res => {
                if (this.loading) return;
                this.loading = true;
                var form = this.form;
                let price = this.form.price
                this.$post(api.strategybooking.insert, form).then(res => {
                    this.loading = false;
                    if (res.code == api.code.OK) {
                        this.$message.success('添加成功');
                        this.$emit('success', res.data);
                        this.$refs.formModel.resetFields();
                        this.$router.go(-1);
                        console.log('test_price', price);
                        const orderId = res.data.order;
                        console.log('test_strategyId', orderId);
                        console.log('test_strategyId2', res.data.order);
                        console.log('res_test', res);
                        window.open(`http://localhost:8088/alipay/strategy/pay?amount=${price}&orderId=${res.data.order}`);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                })

            }).catch(err => {
                console.log(err.message);
            })

        },
        loadInfo() {
            var form = this.form;
            // 获取模块得数据
            this.loading = true;
            this.$post(api.strategybooking.create, {
                id: this.$route.query.id
            }).then(res => {
                this.loading = false;
                console.log(res);
                if (res.code == api.code.OK) {
                    extend(this, res.data);
                    var readMap = res.data.readMap;
                    for (var key in readMap) {
                        if (readMap.hasOwnProperty(key) && form.hasOwnProperty(key)) {
                            form[key] = readMap[key];
                        }
                    }
                    form.strategyId = readMap.id;
                } else {
                    this.$message.error(res.msg);
                    this.$router.go(-1);
                }
            }).catch(err => {
                this.$message.error(err.message);
                this.$router.go(-1);
            });
        },
    },
    created() {
        this.loadInfo();
    },
    mounted() {
    },
    destroyed() {
    }
}
</script>
